<!-- 查询面板 -->
<template>
  <div>
    <Toolbar>
      <Icon type="icon-jiantouxia"
            class="qv-icon-event"
            @click="btnEvent('btnMore')" />
      <!-- 查询条件 -->
      <Select v-model="the.select.field"
              placeholder="请选择"
              class="qv-list-tools-field">
        <option v-for="(value, key, index) in the.tpl.field"
                :key="index"
                :value="key">
          {{ value }}
        </option>
      </Select>
      <Input v-model="the.select.word"
             style="border-radius: 0;">
      </Input>
      <Button type="primary"
              style="border-radius: 0 0.2rem 0.2rem 0;"
              @click="btnEvent('btnSearch')">
        <Icon type="icon-sousuo" />
      </Button>
    </Toolbar>
  </div>
</template>

<script>
import { reactive } from '@/components/vue.api';
export default {
  // components: {},
  // props: {},
  // data () {
  //   return {
  //   };
  // },

  // computed: {},
  // mounted: {},
  // methods: {},
  // created(){}
  setup (props, context) {

    /**
    * 组件数据
    */
    const the = reactive({
      show: {

      },
      tpl: {
        field: {
          ID: '编号'
        }
      },
      select: {
        field: 'ID',
        word: ''
      }
    });

    /**
     * 按钮事件
     */
    const btnEvent = (cmd) => {

      switch (cmd) {
        default:
          console.log(cmd)
      }

    }

    return { the, btnEvent }

  },
}

</script>
<style lang='less'>
</style>